<template>
  <div class="store-detail-container">
    <div v-if="loading" class="loading-container">
      <el-skeleton style="width: 100%" :rows="10" animated />
    </div>
    
    <template v-else>
      <div class="store-header">
        <el-page-header @back="goBack" :title="store.name" />
      </div>
      
      <div class="store-content">
        <div class="store-banner">
          <img :src="store.logoUrl || '/assets/store-default.jpg'" :alt="store.name">
          <div class="store-info-overlay">
            <h1>{{ store.name }}</h1>
            <div class="store-info-detail">
              <span class="store-address">
                <i class="el-icon"><Location /></i>
                {{ store.addressText }}
              </span>
              <span class="store-phone">
                <i class="el-icon"><Phone /></i>
                {{ store.contactPhone }}
              </span>
            </div>
          </div>
        </div>
        
        <div class="store-actions">
          <el-button type="primary" @click="showMap">
            <i class="el-icon"><Location /></i>
            查看地图
          </el-button>
          <el-button type="primary" @click="navigateToStore">
            <i class="el-icon"><Position /></i>
            导航路线
          </el-button>
        </div>
        
        <div class="store-info-section">
          <h2>店铺信息</h2>
          <div class="store-info-card">
            <div class="store-details">
              <div class="store-detail-item" v-if="store.contactPhone">
                <span class="store-detail-label">联系方式</span>
                <span class="store-detail-value">{{ store.contactPhone }}</span>
              </div>
              <div class="store-detail-item" v-if="store.addressText">
                <span class="store-detail-label">店铺地址</span>
                <span class="store-detail-value">{{ store.addressText }}</span>
              </div>
            </div>
            <div class="store-description" v-if="store.description">
              <p>{{ store.description }}</p>
            </div>
          </div>
        </div>
        
        <div class="store-products">
          <h2>店铺商品</h2>
          
          <el-tabs v-model="activeTab">
            <el-tab-pane name="pet">
              <template #label>
                <span class="tab-label">
                  🐾 宠物 
                </span>
              </template>
              <div class="products-grid" v-if="petProducts.length > 0">
                <div 
                  class="product-card" 
                  v-for="product in petProducts" 
                  :key="product.id" 
                  @click="viewProduct(product.id)"
                >
                  <div class="product-image">
                    <img :src="product.mainImageUrl || '/assets/pet-default.jpg'" :alt="product.name">
                  </div>
                  <div class="product-info">
                    <div class="product-name">{{ product.name }}</div>
                    <div class="product-details" v-if="product.breed || product.age || product.sex">
                      <span v-if="product.breed" class="detail-tag">{{ product.breed }}</span>
                      <span v-if="product.age" class="detail-tag">{{ product.age }}</span>
                      <span v-if="product.sex" class="detail-tag">{{ product.sex }}</span>
                    </div>
                    <div class="product-desc">{{ product.description }}</div>
                    <div class="product-price">¥{{ product.price }}</div>
                    <div class="product-stock" v-if="product.stock !== undefined">
                      库存: {{ product.stock }}
                    </div>
                  </div>
                </div>
              </div>
              <el-empty v-else description="该店铺暂无宠物商品" />
            </el-tab-pane>
            
            <el-tab-pane name="accessory">
              <template #label>
                <span class="tab-label">
                  🛒 周边商品 
                </span>
              </template>
              <div class="products-grid" v-if="accessoryProducts.length > 0">
                <div 
                  class="product-card" 
                  v-for="product in accessoryProducts" 
                  :key="product.id" 
                  @click="viewProduct(product.id)"
                >
                  <div class="product-image">
                    <img :src="product.mainImageUrl || '/assets/product-default.jpg'" :alt="product.name">
                  </div>
                  <div class="product-info">
                    <div class="product-name">{{ product.name }}</div>
                    <div class="product-desc">{{ product.description }}</div>
                    <div class="product-price">¥{{ product.price }}</div>
                    <div class="product-stock" v-if="product.stock !== undefined">
                      库存: {{ product.stock }}
                    </div>
                  </div>
                </div>
              </div>
              <el-empty v-else description="该店铺暂无周边商品" image="/assets/empty-supplies.svg" />
            </el-tab-pane>
          </el-tabs>
        </div>
        
        <div class="store-reviews">
            <h2>用户评价</h2>
            <div v-if="allReviews.length > 0">
              <div class="rating-summary">
                <div class="rating-score">{{ averageRating.toFixed(1) }}</div>
                <div class="rating-stars">{{ generateStars(averageRating) }}</div>
                <div class="rating-count">基于 {{ totalReviewCount }} 条评价</div>
              </div>
              
              <div class="review-list">
                <div class="review-item" v-for="(review, index) in displayedReviews" :key="index">
                  <div class="reviewer-info">
                    <img
                      :src="review.userAvatarUrl || '/assets/default-avatar.jpg'"
                      :alt="review.userNickname"
                      class="reviewer-avatar"
                    >
                    <div class="reviewer-details">
                      <div class="reviewer-name">{{ review.userNickname || '匿名用户' }}</div>
                      <div class="review-date">{{ formatDate(review.createdAt) }}</div>
                      <div class="review-product">评价商品：{{ review.productName }}</div>
                    </div>
                  </div>
                  <div class="review-stars">{{ generateStars(review.rating) }}</div>
                  <div class="review-content">{{ review.content || '用户未留下评价内容' }}</div>
                  <div class="review-images" v-if="review.imageUrls && review.imageUrls.length">
                    <img
                      v-for="(img, imgIndex) in review.imageUrls"
                      :key="imgIndex"
                      :src="img"
                      class="review-image"
                      @click="previewImage(img)"
                    >
                  </div>
                </div>
              </div>
              
              <div v-if="allReviews.length > 3" class="view-more-reviews">
                <el-button type="text" @click="toggleShowAllReviews">
                  {{ showAllReviews ? '收起评价' : `查看更多评价 (${allReviews.length - 3}条)` }} >
                </el-button>
              </div>
            </div>
            <el-empty v-else description="暂无用户评价" />
        </div>
      </div>
    </template>
    
    <!-- 地图弹窗 -->
    <el-dialog v-model="mapDialogVisible" title="店铺位置" width="80%">
      <div class="map-container" ref="mapContainer" style="height: 400px;">
        <div v-if="mapLoading" class="map-loading">
          <el-skeleton style="width: 100%; height: 100%" :rows="8" animated />
          <div class="loading-text">地图加载中...</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Location, Phone, Position } from '@element-plus/icons-vue'

// 扩展Window接口以包含AMap
declare global {
  interface Window {
    AMap: any;
  }
}

// 定义商品接口
interface Product {
  id: number;
  name: string;
  description: string;
  price: number;
  mainImageUrl: string;
  storeId: number;
  categoryId: number;
  breed?: string;
  age?: string;
  sex?: string;
  weight?: number;
  color?: string;
  healthInfo?: string;
  stock?: number;
  videoUrl?: string;
  averageRating?: number;
  reviewCount?: number;
}

// 定义店铺接口
interface Store {
  id: number;
  name: string;
  addressText: string;
  logoUrl: string;
  contactPhone: string;
  latitude: number;
  longitude: number;
  description?: string;
}

// 定义评论接口
interface Review {
  name: string;
  avatar: string;
  date: string;
  stars: string;
  content: string;
}

const route = useRoute()
const router = useRouter()
const storeId = ref(route.params.id as string)
const loading = ref(true)
const activeTab = ref('pet')
const mapDialogVisible = ref(false)
const mapContainer = ref(null)
const showDirections = ref(false)
const userLocation = ref({ lng: 116.404, lat: 39.915 }) // 默认位置（北京）
const mapLoading = ref(false)

// 分类配置常量 - 根据数据库结构定义
const CATEGORY_CONFIG = {
  LIVE_PETS_PARENT: 1,           // 活体宠物父分类ID
  LIVE_PETS_SUBCATEGORIES: [101, 102, 103], // 活体宠物子分类ID：狗狗专区、猫咪专区、小宠专区
  PET_SUPPLIES_CATEGORIES: [2, 3, 4, 5]     // 宠物用品分类：宠物主粮、宠物零食、日用玩具、医疗保健
}

// 店铺信息
const store = ref<Store>({
  id: 0,
  name: '',
  addressText: '',
  logoUrl: '',
  contactPhone: '',
  latitude: 0,
  longitude: 0
})

// 店铺商品
const products = ref<Product[]>([])

// 评论数据（暂无数据）
const reviews = ref<Review[]>([])

// 评论相关数据
const allReviews = ref<any[]>([])
const showAllReviews = ref(false)
const totalReviewCount = ref(0)
const averageRating = ref(0)

// 显示的评论列表
const displayedReviews = computed(() => {
  return showAllReviews.value ? allReviews.value : allReviews.value.slice(0, 3)
})

// 切换显示所有评论
const toggleShowAllReviews = () => {
  showAllReviews.value = !showAllReviews.value
}

// 生成星级显示
const generateStars = (rating: number) => {
  const fullStars = Math.floor(rating)
  const hasHalfStar = rating % 1 >= 0.5
  const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0)

  return '★'.repeat(fullStars) +
         (hasHalfStar ? '☆' : '') +
         '☆'.repeat(emptyStars)
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 预览图片
const previewImage = (imageUrl: string) => {
  window.open(imageUrl, '_blank')
}

// 获取店铺所有商品的评论
const fetchStoreReviews = async () => {
  try {
    if (products.value.length === 0) return
    
    const reviewPromises = products.value.map(async (product) => {
      try {
        const response = await axios.get(`/api/user/reviews/product/${product.id}`, {
          params: {
            current: 1,
            size: 10 // 每个商品获取前10条评论
          }
        })
        
        if (response.data && response.data.records) {
          // 为每条评论添加商品名称
          return response.data.records.map((review: any) => ({
            ...review,
            productName: product.name,
            productId: product.id
          }))
        }
        return []
      } catch (error) {
        console.error(`获取商品 ${product.id} 评论失败:`, error)
        return []
      }
    })
    
    const reviewsArrays = await Promise.all(reviewPromises)
    const flatReviews = reviewsArrays.flat()
    
    // 按创建时间排序，最新的在前
    flatReviews.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    
    allReviews.value = flatReviews
    totalReviewCount.value = flatReviews.length
    
    // 计算平均评分
    if (flatReviews.length > 0) {
      const totalRating = flatReviews.reduce((sum, review) => sum + review.rating, 0)
      averageRating.value = totalRating / flatReviews.length
    }
    
  } catch (error) {
    console.error('获取店铺评论失败:', error)
  }
}

// 判断是否为活体宠物
const isPetProduct = (product: Product): boolean => {
  if (!product.categoryId) return false
  
  // 直接属于活体宠物分类或其子分类
  return product.categoryId === CATEGORY_CONFIG.LIVE_PETS_PARENT || 
         CATEGORY_CONFIG.LIVE_PETS_SUBCATEGORIES.includes(product.categoryId)
}

// 按类别筛选商品 - 活体宠物
const petProducts = computed(() => {
  return products.value.filter(product => isPetProduct(product))
})

// 按类别筛选商品 - 周边商品（非活体宠物的所有商品）
const accessoryProducts = computed((): Product[] => {
  return products.value.filter(product => !isPetProduct(product))
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 查看商品详情
const viewProduct = (productId: number) => {
  router.push(`/product/${productId}`)
}

// 显示地图
const showMap = () => {
  mapDialogVisible.value = true
  showDirections.value = false
  mapLoading.value = true
  
  // 设置超时处理
  const timeoutId = setTimeout(() => {
    if (mapLoading.value) {
      mapLoading.value = false
      ElMessage.warning('地图加载超时，请稍后重试')
    }
  }, 10000) // 10秒超时
  
  // 在对话框显示后渲染地图
  setTimeout(() => {
    if (window.AMap && mapContainer.value) {
      clearTimeout(timeoutId)
      renderMap()
      mapLoading.value = false
    } else {
      // 如果地图API还没有加载完成，等待加载
      let checkCount = 0
      const maxChecks = 20 // 最多检查20次
      
      const checkAMapLoaded = () => {
        checkCount++
        if (window.AMap && mapContainer.value) {
          clearTimeout(timeoutId)
          renderMap()
          mapLoading.value = false
        } else if (checkCount < maxChecks) {
          setTimeout(checkAMapLoaded, 500)
        } else {
          clearTimeout(timeoutId)
          mapLoading.value = false
          ElMessage.warning('地图服务暂不可用')
        }
      }
      
      // 如果地图脚本还没有加载，先加载脚本
      if (!document.querySelector('script[src*="webapi.amap.com"]')) {
        const script = document.createElement('script')
        script.src = 'https://webapi.amap.com/maps?v=2.0&key=66d6616317a208714cc4133d3d09cf57'
        script.async = true
        script.onload = () => {
          setTimeout(() => {
            if (window.AMap && mapContainer.value) {
              clearTimeout(timeoutId)
              renderMap()
              mapLoading.value = false
            } else {
              clearTimeout(timeoutId)
              mapLoading.value = false
              ElMessage.warning('地图服务暂不可用')
            }
          }, 100)
        }
        script.onerror = () => {
          clearTimeout(timeoutId)
          mapLoading.value = false
          ElMessage.error('地图服务加载失败')
        }
        document.head.appendChild(script)
      } else {
        // 脚本已存在，等待加载完成
        checkAMapLoaded()
      }
    }
  }, 300)
}

// 导航到店铺
const navigateToStore = () => {
  const { name, latitude, longitude } = store.value;
  
  if (!latitude || !longitude || !name) {
    ElMessage.warning('店铺位置信息不完整');
    return;
  }

  // 检查用户位置是否为默认位置（北京），如果是则提示用户
  const isDefaultLocation = userLocation.value.lng === 116.404 && userLocation.value.lat === 39.915;
  if (isDefaultLocation) {
    ElMessage.info('正在使用默认位置作为起点，建议允许浏览器获取您的位置以获得更准确的导航');
  }

  // 构建起点坐标字符串，优先使用用户当前位置
  const fromCoords = `${userLocation.value.lng},${userLocation.value.lat}`;
  const fromName = encodeURIComponent(isDefaultLocation ? '默认位置' : '我的位置');

  // 判断是否是移动设备
  const isMobile = /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);

  if (isMobile) {
    // 移动端：尝试唤起高德地图App
    // 高德地图App导航URL格式：包含起点和终点
    const appSchemeUrl = `iosamap://navi?sourceApplication=PetShop&slat=${userLocation.value.lat}&slon=${userLocation.value.lng}&sname=${fromName}&dlat=${latitude}&dlon=${longitude}&dname=${encodeURIComponent(name)}&dev=1&style=2`;
    window.location.href = appSchemeUrl;

    // Fallback 逻辑：如果App没唤起，几秒后跳转到网页版
    const timeout = setTimeout(() => {
      if (confirm('检测到您未安装高德地图App或唤起失败，是否跳转到高德地图网页版进行导航？')) {
        const webNavUrl = `https://uri.amap.com/navigation?from=${fromCoords},${fromName}&to=${longitude},${latitude},${encodeURIComponent(name)}&mode=car&policy=1&src=PetShop&coordinate=gaode`;
        window.open(webNavUrl, '_blank');
      }
    }, 800);

    // 监听页面可见性变化来清除计时器
    const visibilitychangeHandler = () => {
      if (document.hidden || (document as any).webkitHidden) {
        clearTimeout(timeout);
        document.removeEventListener('visibilitychange', visibilitychangeHandler);
        document.removeEventListener('webkitvisibilitychange', visibilitychangeHandler);
      }
    };
    document.addEventListener('visibilitychange', visibilitychangeHandler);
    document.addEventListener('webkitvisibilitychange', visibilitychangeHandler);
  } else {
    // 桌面端：直接跳转到高德地图网页版
    const webNavUrl = `https://uri.amap.com/navigation?from=${fromCoords},${fromName}&to=${longitude},${latitude},${encodeURIComponent(name)}&mode=car&policy=1&src=PetShop&coordinate=gaode`;
    window.open(webNavUrl, '_blank');
  }
};

// 渲染地图
const renderMap = () => {
  if (!window.AMap || !mapContainer.value) {
    console.error('地图容器或AMap API不可用')
    return
  }
  
  // 检查店铺位置信息
  if (!store.value.longitude || !store.value.latitude) {
    ElMessage.warning('店铺位置信息不完整')
    return
  }
  
  try {
    const map = new window.AMap.Map(mapContainer.value, {
      zoom: 15,
      center: [store.value.longitude, store.value.latitude],
      resizeEnable: true
    })
    
    // 添加店铺标记
    new window.AMap.Marker({
      position: [store.value.longitude, store.value.latitude],
      title: store.value.name,
      map: map
    })
    
    // 如果需要显示导航路线
    if (showDirections.value) {
      // 添加用户位置标记
      new window.AMap.Marker({
        position: [userLocation.value.lng, userLocation.value.lat],
        title: '我的位置',
        icon: '//webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
        map: map
      })
      
      // 添加两点间的路线
      const driving = new window.AMap.Driving({
        map: map,
        panel: false
      })
      
      driving.search(
        [userLocation.value.lng, userLocation.value.lat],
        [store.value.longitude, store.value.latitude]
      )
    }
    
    console.log('地图渲染成功')
  } catch (error) {
    console.error('地图渲染失败:', error)
    ElMessage.error('地图渲染失败')
  }
}

// 获取用户位置
const getUserLocation = () => {
  // 首先尝试从localStorage获取之前保存的位置
  const savedLocation = localStorage.getItem('userLocation')
  if (savedLocation) {
    try {
      const parsedLocation = JSON.parse(savedLocation)
      if (parsedLocation.lng && parsedLocation.lat) {
        userLocation.value = parsedLocation
        console.log('从localStorage获取用户位置:', userLocation.value)
        return
      }
    } catch (error) {
      console.error('解析保存的位置信息失败:', error)
    }
  }

  // 如果localStorage中没有位置信息，则重新获取
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        userLocation.value = {
          lng: position.coords.longitude,
          lat: position.coords.latitude
        }
        // 保存到localStorage
        localStorage.setItem('userLocation', JSON.stringify(userLocation.value))
        console.log('重新获取并保存用户位置:', userLocation.value)
      },
      (error) => {
        console.error('获取位置失败:', error)
        console.log('使用默认位置')
      }
    )
  } else {
    console.error('浏览器不支持地理位置服务')
  }
}

// 获取店铺详情和商品
const fetchStoreDetail = async () => {
  try {
    loading.value = true
    
    // 1. 获取店铺基本信息
    const storeResponse = await axios.get(`/api/user/stores/${storeId.value}`)
    const storeData = storeResponse.data
    
    store.value = {
      id: storeData.id,
      name: storeData.name,
      addressText: storeData.addressText,
      logoUrl: storeData.logoUrl,
      contactPhone: storeData.contactPhone,
      latitude: storeData.latitude || 0,
      longitude: storeData.longitude || 0,
      description: storeData.description
    }
    
    // 2. 如果店铺详情包含商品数据，直接使用
    if (storeData.products && storeData.products.records) {
      products.value = storeData.products.records
    } else {
      // 3. 如果没有商品数据，单独获取店铺商品
      await fetchStoreProducts()
    }
    
    // 4. 获取店铺评论
    await fetchStoreReviews()
    
  } catch (error) {
    console.error('获取店铺详情失败:', error)
    ElMessage.error('获取店铺详情失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 单独获取店铺商品
const fetchStoreProducts = async () => {
  try {
    const response = await axios.get('/api/user/products', {
      params: {
        storeId: storeId.value,
        current: 1,
        size: 100 // 获取更多商品
      }
    })
    
    if (response.data && response.data.records) {
      products.value = response.data.records
    }
  } catch (error) {
    console.error('获取店铺商品失败:', error)
    ElMessage.warning('获取店铺商品失败')
  }
}

onMounted(() => {
  fetchStoreDetail()
  getUserLocation()
  
  // 加载高德地图API
  if (!window.AMap) {
    const script = document.createElement('script')
    script.src = 'https://webapi.amap.com/maps?v=2.0&key=66d6616317a208714cc4133d3d09cf57'
    script.async = true
    document.head.appendChild(script)
  }
})
</script>

<style scoped>
.store-detail-container {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #fff;
}

.loading-container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border-radius: 4px;
}

.store-header {
  margin-bottom: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 0 20px;
}

.store-content {
  display: flex;
  flex-direction: column;
  background-color: white;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 20px 20px;
}

.store-banner {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 30px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

.store-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.store-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
}

.store-info-overlay h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
}

.store-info-detail {
  display: flex;
  gap: 20px;
}

.store-address, .store-phone {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.store-address i, .store-phone i {
  margin-right: 5px;
}

.store-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  align-items: center;
}

.store-actions .el-button {
  min-width: 120px;
}

.store-products {
  margin-bottom: 40px;
}

.store-products h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.product-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-name {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}

.product-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.map-container {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.map-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  z-index: 10;
}

.loading-text {
  margin-top: 20px;
  color: #666;
  font-size: 14px;
}

/* 店铺信息部分 */
.store-info-section {
  margin-bottom: 40px;
}

.store-info-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.store-info-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

.store-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.store-detail-item {
  display: flex;
  flex-direction: column;
}

.store-detail-label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.store-detail-value {
  color: #666;
}

/* 用户评价部分 */
.store-reviews {
  margin-bottom: 40px;
}

.store-reviews h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.store-rating {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.store-rating-score {
  font-size: 36px;
  font-weight: bold;
  color: #ff9800;
  margin-right: 20px;
}

.store-rating-stars {
  color: #ff9800;
  font-size: 20px;
  margin-right: 10px;
}

.store-rating-count {
  color: #999;
}

.review-list {
  margin-bottom: 20px;
}

/* 标签页样式 */
.tab-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

.count-badge {
  background: #f56c6c;
  color: white;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 12px;
  margin-left: 4px;
}

/* 商品徽章样式 */
.product-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
  font-weight: bold;
  z-index: 1;
}

.pet-badge {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
}

.supply-badge {
  background: linear-gradient(45deg, #4834d4, #686de0);
}

/* 商品详情标签 */
.product-details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.detail-tag {
  background: #f0f0f0;
  color: #666;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* 库存信息 */
.product-stock {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* 评论相关样式 */
.rating-summary {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.rating-score {
  font-size: 36px;
  font-weight: bold;
  margin-right: 20px;
  color: #ff9800;
}

.rating-stars {
  color: #ff9800;
  font-size: 20px;
  margin-right: 15px;
}

.rating-count {
  color: #666;
  font-size: 14px;
}

.review-list {
  margin-bottom: 20px;
}

.review-item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  background-color: white;
  margin-bottom: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.reviewer-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.reviewer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
  object-fit: cover;
}

.reviewer-details {
  flex: 1;
}

.reviewer-name {
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.review-date {
  color: #999;
  font-size: 12px;
  margin-bottom: 4px;
}

.review-product {
  color: #666;
  font-size: 13px;
  background-color: #f0f0f0;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.review-stars {
  color: #ff9800;
  margin-bottom: 8px;
  font-size: 16px;
}

.review-content {
  color: #333;
  line-height: 1.6;
  margin-bottom: 10px;
}

.review-images {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.review-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.review-image:hover {
  transform: scale(1.1);
}

.view-more-reviews {
  text-align: center;
  margin-top: 20px;
}

.view-more-reviews .el-button {
  color: #409eff;
  font-size: 14px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .store-details {
    grid-template-columns: 1fr;
  }
  
  .store-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .store-actions .el-button {
    width: 100%;
    min-width: auto;
  }
  
  .store-info-detail {
    flex-direction: column;
    gap: 10px;
  }
  
  .tab-label {
    font-size: 14px;
  }
  
  .count-badge {
    font-size: 10px;
    padding: 1px 4px;
  }
  
  .rating-summary {
    flex-direction: column;
    text-align: center;
  }
  
  .rating-score {
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  .rating-stars {
    margin-right: 0;
    margin-bottom: 5px;
  }
  
  .reviewer-info {
    flex-direction: column;
  }
  
  .reviewer-avatar {
    align-self: flex-start;
    margin-bottom: 8px;
  }
}
</style>